<template>
  <div class="main">
    <area-select v-model="cityInfo"></area-select>
    <div class="address-info-box">
      <div class="myorder-address">
        <h3>我的收货地址</h3>
      </div>
      <div class="address-box">
        <div class="addAddress-box">
          <el-button type="info" @click="openAddDia">新增收货地址</el-button>
          <span>你已经创建{{ addressNum }}个收货地址，最多可创建10个</span>
        </div>
        <div class="addressList-box" v-for="item in addressList" :key="item">
          <div class="boxTitle">
            <div class="titleLeft">
              <h3>{{ item.name }} {{ item.region }}</h3>
              <span v-if="item.defaultFlag === 'Y'">默认地址</span>
            </div>
            <div class="closeBox">
              <i class="fa fa-times" @click="dropAddress(item)"></i>
            </div>
          </div>
          <div class="boxContent">
            <div class="contentLeft">
              <div class="item">
                <span>收货人:</span>
                <div class="itemc">{{ item.name }}</div>
              </div>
              <div class="item">
                <span>所在地区:</span>
                <div class="itemc">{{ item.region }}</div>
              </div>
              <div class="item">
                <span>地址:</span>
                <div class="itemc">{{ item.address }}</div>
              </div>
              <div class="item">
                <span>手机:</span>
                <div class="itemc">{{ item.phone }}</div>
              </div>
            </div>
            <div class="contentRight">
              <el-link
                :underline="false"
                v-if="!(item.defaultFlag === 'Y')"
                @click="changeDefault(item)"
                >设为默认</el-link
              >
              <el-link :underline="false" @click="openEditDia(item)"
                >编辑</el-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑收货地址信息弹窗 -->
    <el-dialog
      v-model="editVisible"
      title="编辑收货地址"
      width="30%"
      :before-close="handleClose"
    >
      <div class="formC">
        <el-form
          ref="editInfoFormRef"
          :model="editInfoForm"
          :rules="editInfoRules"
          label-width="120px"
          class="demo-ruleForm"
          label-suffix=":"
          :size="large"
        >
          <el-form-item label="收货人" prop="name">
            <el-input v-model="editInfoForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="region">
            <el-cascader
              v-model="editInfoForm.region"
              :options="options"
              clearable
              placeholder="选择地区"
              :value="editInfoForm.region"
              props="cityDataProps"
              @change="edithandleChange"
              style="width: 390px"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model="editInfoForm.address"
              clearable
              placeholder="输入乡镇以下信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="editInfoForm.phone" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveFormInfo"
            >保存收货地址</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 新增收货地址信息弹窗 -->
    <el-dialog
      v-model="addVisible"
      title="新增收货地址"
      width="30%"
      :before-close="addInfoHandleClose"
    >
      <div class="formC">
        <el-form
          ref="addInfoFormRef"
          :model="addInfoForm"
          :rules="addInfoRules"
          label-width="120px"
          class="demo-ruleForm"
          label-suffix=":"
          size="large"
        >
          <el-form-item label="收货人" prop="name">
            <el-input v-model="addInfoForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="region">
            <el-cascader
              v-model="addInfoForm.region"
              :options="options"
              clearable
              placeholder="选择地区"
              @change="handleChangeArea"
              style="width: 390px"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model="addInfoForm.address"
              clearable
              placeholder="输入乡镇以下信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="addInfoForm.phone" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="saveReceiveAddress('addInfoFormRef')"
            >保存收货地址</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import address from "@/utils/address";
import avaterImg from "../../../assets/image/avaterDemo.jpg";
import {
  receiveGoodsInfoList,
  saveReceiveGoodsInfo,
  updateReceiveGoodsInfo,
  removeReceiveGoodsInfo,
} from "@/api/user";
export default {
  data() {
    return {
      cityInfo: "",
      options: address,
      selectedOptions: [],
      editVisible: false,
      addVisible: false,
      cityDataProps: {
        name: "name",
        value: "value",
      },
      circleUrl: avaterImg,
      addressNum: 0,
      addressList: [],
      editInfoForm: {},
      // 新增收货地址表单规则
      addInfoForm: {
        name: "",
        province: "",
        region: [],
        address: "",
        phone: "",
        defaultAddress: true,
        ischoseAddress: true,
      },
      // 新增收货地址表单规则
      editInfoRules: {
        name: [
          {
            required: true,
            message: "请正确填写收货人",
            trigger: "blur",
          },
        ],
        region: [
          {
            required: true,
            message: "请选择所在地",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
      addInfoRules: {
        name: [
          {
            required: true,
            message: "请正确填写收货人",
            trigger: "blur",
          },
        ],
        region: [
          {
            required: true,
            message: "请选择所在地",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.queryReceiveGoodsInfo();
  },
  methods: {
    // 编辑对话框关闭事件
    handleClose() {
      this.editVisible = !this.editVisible;
    },
    // 新增对话框事件
    addInfoHandleClose() {
      // 关闭对话框清空表单
      this.$refs.addInfoFormRef.resetFields();
      this.addVisible = !this.addVisible;
    },
    openAddDia() {
      this.addVisible = !this.addVisible;
    },
    openEditDia(item) {
      this.editInfoForm = item;
      this.editInfoForm.address = "";
      this.editVisible = !this.editVisible;
    },
    // 保存编辑后的form表单
    saveFormInfo() {
      let address = this.editInfoForm.region.toString();
      address = address.replace(/,/g, "");
      this.editInfoForm.region = address;
      this.editInfoForm.address = address + this.editInfoForm.address;
      console.log(this.editInfoForm);
      updateReceiveGoodsInfo(this.editInfoForm).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.queryReceiveGoodsInfo();
          this.editVisible = false;
          this.$message.success("修改成功");
        }
      });
    },
    // 新增收货地址按钮事件
    saveReceiveAddress() {
      console.log(this.addInfoForm);
      let address = this.addInfoForm.region.toString();
      address = address.replace(/,/g, "");
      this.addInfoForm.region = address;
      this.addInfoForm.address = address + this.addInfoForm.address;
      saveReceiveGoodsInfo(this.addInfoForm).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$message.success("添加成功");
          this.queryReceiveGoodsInfo();
          this.addVisible = false;
        }
      });
    },
    // 监听地区选择框关闭事件
    edithandleChange() {
      console.log(this.selectCity);
    },
    // 设为默认事件
    changeDefault(event) {
      let msg = "是否将当前地址修改为默认地址, 是否继续?";
      // 弹出一个框，用来提示用户是否确定删除
      this.$confirm(msg, "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          let pos = this.addressList.indexOf(event);
          let serialNo = this.addressList[pos].serialNo;
          console.log(serialNo);
          updateReceiveGoodsInfo({ serialNo: serialNo, defaultFlag: "Y" }).then(
            (res) => {
              if (res.code === 0) {
                this.$message.success("修改成功");
                this.queryReceiveGoodsInfo();
              }
            }
          );
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    handleChangeArea(value) {
      console.log(value);
    },
    dropAddress(event) {
      let msg = "此操作会删除当前地址, 是否继续?";
      // 弹出一个框，用来提示用户是否确定删除
      this.$confirm(msg, "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          let pos = this.addressList.indexOf(event);
          let serialNo = this.addressList[pos].serialNo;
          removeReceiveGoodsInfo([serialNo]).then((res) => {
            if (res.code === 0) {
              this.$message.success("删除成功");
              this.queryReceiveGoodsInfo();
            }
          });
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    queryReceiveGoodsInfo() {
      receiveGoodsInfoList().then((res) => {
        console.log(res);
        this.addressList = res.page.list;
        this.addressNum = res.page.list.length;
      });
    },
  },
};
</script>
<style lang="scss">
.main {
  position: relative;
  .address-info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    .myorder-address {
      margin: 20px 430px;
      padding: 0 30px;
      width: 870px;
      height: 50px;
      background-color: #fff;
      display: flex;
      align-items: center;
    }
    .address-box {
      background-color: #fff;
      display: flex;
      width: 870px;
      flex-direction: column;
      padding: 20px 20px;

      .addAddress-box {
        display: flex;
        align-items: center;
        .el-button {
          background-color: #f5fbef;
          color: #323333;
          border-radius: 0;
          font-size: 14px;
          font-weight: 700;
        }
        span {
          font-size: 14px;
          color: #666;
          margin: 0 10px;
        }
      }
      .addressList-box {
        border: 1px solid #244d4d;
        margin: 10px 0;
        height: 200px;
        display: flex;
        flex-direction: column;
        padding: 10px;
        .boxTitle {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .titleLeft {
            display: flex;
            h3 {
              font-size: 14px;
              color: #666;
              font-weight: blod;
            }
            span {
              background-color: #ffaa45;
              color: white;
              font-size: 14px;
              margin: 0 15px;
            }
          }
          .closeBox {
            i {
              color: #244d4d;
            }
          }
        }
        .boxContent {
          display: flex;
          position: relative;
          .contentLeft {
            font-size: 14px;
            .item {
              display: flex;
              padding: 5px 0 0 30px;
              span {
                color: #999;
                width: 60px;
                display: flex;
                justify-content: flex-end;
              }
              .itemc {
                color: #666;
                margin: 0 5px;
              }
            }
          }
          .contentRight {
            display: flex;
            position: absolute;
            top: 122px;
            right: 0;
            .el-link {
              color: #244d4d;
              margin: 0 5px;
              &:hover {
                color: #005ea7;
              }
            }
          }
        }
      }
    }
  }
  .el-cascader {
    width: 240px;
  }
}
</style>
